<template>
  <div>
    <div style="max-height: 80vh;overflow-y: auto">
      <el-timeline :reverse="false">
        <el-timeline-item v-for="(pjItem, index) in pjList" :timestamp="pjItem.createtimestr"
          :key="pjItem.id" size="large" color="#0bbd87">
          <span style="font-weight: bold;font-size: 14px;color: #555555">{{pjItem.neirong}}</span>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-form ref="pjForm" size="small" :model="entity" :rules="rules" label-width="120px">
      <el-form-item label="评论" prop="neirong">
        <el-input type="textarea" resize="none" :autosize="{ minRows: 3, maxRows: 3 }" v-model="entity.neirong" placeholder="" />
      </el-form-item>
      <el-form-item>
        <el-popconfirm style="float: right"
                       confirmButtonText='确认' cancelButtonText='取消'
                       icon="el-icon-info" iconColor="red"
                       title="确认要评论吗？" @confirm="onSubmit">
          <el-button slot="reference" type="primary" >评论</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from "dayjs";
export default {
  props:{
    xmId : {type : Number, default: 0}
  },
  data() {
    return {
      pjList:[],
      entity:{
        gysid:this.xmId,
        neirong : ''
      },
      rules: {
        neirong: [
          { required: true, message: '请输入评价', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
    this.loadPj();
  },
  methods: {
    loadPj(){
      request({ url: '/xiangmu/listxiangmupj', data: {id : this.xmId} }).then( res =>{
        this.pjList = res.data
        this.pjList.forEach(x=>x.createtimestr = dayjs(x.createtime).format("YYYY-MM-DD HH:mm"))
      })
    },
    onSubmit(){
      this.$refs['pjForm'].validate((valid) => {
        if(valid){
          request({
            url: '/xiangmu/addeditxiangmupj',
            data: this.entity
          }).then( res =>{
            if(res.code === "200"){
              this.loadPj();
              this.entity.neirong=''
            }else{
              this.$message.error(res.msg);
            }
          })
        }else{
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
